<template>
  <div class="card" v-bolang>
    <div class="left">
      {{ cardItem?.name }}
      <slot v-if="!cardItem"></slot>
    </div>
    <div class="right">
      <i class="iconfont iconyoujiantou" v-if="cardItem?.arrow"></i>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, toRefs } from "vue";
type TCard = {
  cardItem?: {
    name: string;
    arrow?: boolean;
  };
};
const props = defineProps<TCard>();
const { cardItem } = toRefs(props);
</script>
<style scoped lang="scss">
.card {
  padding: 15px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  margin: 12px;
  font-size: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 5px $qian-shadow;
}
</style>
